<script setup lang="ts">
import {ref, watchEffect} from "vue";
import {useRouter } from 'vue-router';
const router = useRouter()
import {navigation} from "@/stores/navigationData";
import indexActive from  "@/assets/images/首页-copy.png"
import indexInactive from "@/assets/images/首页-灰.png"
import evaluateActive from "@/assets/images/心理卡.png"
import evaluateInactive from "@/assets/images/心理卡_灰.png"
import treeActive from "@/assets/images/十字.png"
import treeInactive from "@/assets/images/十字_灰.png"
import appointmentActive from "@/assets/images/fileText-蓝.png"
import appointmentInactive from "@/assets/images/24gf-fileText.png"
import centerActive from "@/assets/images/个人中心.png"
import centerInactive from "@/assets/images/个人中心_灰.png"
// 检查localStorage中是否存在键为'data'的项
function hasDataKeyInLocalStorage() {
    const data = localStorage.getItem('data');
    return data !== null;
}

let chooseArr
if (hasDataKeyInLocalStorage()) {
    let getData = localStorage.getItem('data')
    const store = JSON.parse(getData)
    chooseArr = ref(store)
} else {
    const store = navigation()
    chooseArr = ref(store.chooseArr)
}

function isChoose(item,index) {
    chooseArr.value.forEach(res=>{
        if (index == res.id) {
            res.choose = !res.choose
            navigation().choose = !navigation().choose
            console.log(navigation())
        } else {
            res.choose = false
            navigation().choose = false
        }
    })
}

watchEffect(()=> {
    localStorage.setItem('data',JSON.stringify(chooseArr.value))
})
const icon = {
    indexActive: indexActive,
    indexInactive:indexInactive,
    evaluateActive:evaluateActive,
    evaluateInactive:evaluateInactive,
    treeActive,
    treeInactive,
    appointmentActive:appointmentActive,
    appointmentInactive,
    centerActive,
    centerInactive
};

</script>

<template>
    <van-tabbar  route>
        <van-tabbar-item to="/index">
            <span>首页</span>
            <template #icon="props">
                <img :src="props.active ? icon.indexActive : icon.indexInactive" />
            </template>
        </van-tabbar-item>
        <van-tabbar-item to="/evaluation">
            <span>心理测评</span>
            <template #icon="props">
                <img :src="props.active ? icon.evaluateActive : icon.evaluateInactive" />
            </template>
        </van-tabbar-item>
        <van-tabbar-item  to="/booking">
            <span>发起预约</span>
            <template #icon="props">
                <img :src="props.active ? icon.appointmentActive : icon.appointmentInactive" />
            </template>
        </van-tabbar-item>
        <van-tabbar-item  to="/tree">
            <span>树洞</span>
            <template #icon="props">
                <img :src="props.active ? icon.treeActive : icon.treeInactive" />
            </template>
        </van-tabbar-item>
        <van-tabbar-item  to="/personal">
            <span>个人中心</span>
            <template #icon="props">
                <img :src="props.active ? icon.centerActive : icon.centerInactive" />
            </template>
        </van-tabbar-item>
    </van-tabbar>
</template>

<style scoped lang='less'>
* {
    margin: 0;
    padding: 0;
}
.imgBox {
    display: flex;
    justify-content: space-evenly;
    vertical-align: bottom;

    .imgDiv {
        width: 50%;

        .imgBoxdiv {
            padding-bottom: 8%;
            text-align: center;
            vertical-align: top;
            .imgArr {
                width: 40%;
                height: 40%;
            }
        }

        .text {
            text-align: center;
        }
    }
}
</style>